<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title id="title">修德抄经堂</title>
    <link rel="stylesheet" type="text/css" href="../bower_components/mui/dist/css/mui.css">
    <link rel="stylesheet" type="text/css" href="../css/bushi.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/full.css">
    <link rel="stylesheet" type="text/css" href="../css/cehua.css">
    <script src="../bower_components/mui/dist/js/mui.min.js"></script>
</head>

<body>



    <div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
        <aside class="mui-off-canvas-left" id="offCanvasSide" style="visibility: visible;">
            <div class="mui-scroll-wrapper" style="overflow: visible;">
                <div id="cehua" class="mui-scroll">
                    <ul>
                        <a href="boruo.html">
                            <li style="margin-top: 0;">
                                <img src="../img/banruo.png" class="cover">
                                <p class="same color">般若</p>
                            </li>
                        </a>
                        <a href="jingjin.html">
                            <li>
                                <img src="../img/jingjin.png" class="cover">
                                <p class="same color">精进</p>
                            </li>
                        </a>
                        <a href="bushi.html">
                            <li>
                                <img src="../img/shiyuan.png" class="cover">
                                <p class="same color">施愿</p>
                            </li>
                        </a>
                        <a href="benxin.html">
                            <li>
                                <img src="../img/benxin.png" class="cover">
                                <p class="same color">本心</p>
                            </li>
                        </a>
                    </ul>

                    <div id="erduo"></div>
                </div>
            </div>
        </aside>
        <div class="mui-inner-wrap">
            <div class="page">
                <bg class="bg">
                    <img src="../img/bushibg.png">
                </bg>
                <div class="content">
                    <!--<a href="./search.html">-->
                    <!--<div class="sousuo">-->
                    <!--<span><img src="../img/bore/search.png" class="cover"></span>-->
                    <!--<span>输入经书名称或关键字</span>-->
                    <!--</div>-->
                    <!--</a>-->
                    <div class="main">
                        <div class="left">
                            <p class="same">施
                                <br/>愿</p>
                            <img src="../img/shiyuan.png">
                        </div>
                        <div class="right">
                            <div class="bor_t_b" id="bushi_sutra">
                                <!-- <p class="same color ">《心经》王羲之行书线装本</p> -->
                            </div>
                            <div class="shuoming">
                                <p class="p_l" id="vowTime">
                                    <!-- 2017.04.05发愿 -->
                                </p>
                                <p class="p_r" id="finishTime">
                                    <!-- 2017.05.05完成 -->
                                </p>
                            </div>
                            <div class="fayuanwen">
                                <ul>
                                    <li class="fang color" style="border-bottom: 1px solid #202f47;">
                                        <span>印刷</span>
                                        <span style="margin-left: 10px;" id="printNum">
                                            <!-- 500本 -->
                                        </span>
                                        <a href="yinshua_a.html">
                                            <img src="../img/bushiicon.png" />
                                        </a>
                                    </li>
                                    <li class="fang color">
                                        <span>布施</span>
                                        <span style="margin-left: 10px;" id="donateNum">
                                            <!-- 300本 -->
                                        </span>
                                        <a href="yinshua_b.html">
                                            <img src="../img/bushiicon.png" />
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <!-- <div class="tongxiu"> -->
                            <!-- <ul>
					    				<li>
					    					<img src="../img/shimiao.png" />
					    					<p class="same color p_name">五爷庙</p>
					    					<p class="same color p_num">100本</p>
					    				</li>
					    			</ul> -->


                            <div class="tongxiu-panel" style="height: 121px;">
                                <div style="height: 125px;" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                                    <div id="donate-list" class="mui-scroll" style="height: 125px;">
                                    
                                        <!-- <span class="mui-control-item">
                                            <img src="../img/shimiao.png" />
                                            <p class="same color p_name">五爷庙</p>
                                            <p class="same color p_num">100本</p>
                                        </span>
                                        <span class="mui-control-item">
                                            <img src="../img/shimiao.png" />
                                            <p class="same color p_name">五爷庙</p>
                                            <p class="same color p_num">100本</p>
                                        </span>
                                        <span class="mui-control-item">
                                            <img src="../img/shimiao.png" />
                                            <p class="same color p_name">五爷庙</p>
                                            <p class="same color p_num">100本</p>
                                        </span>
                                        <span class="mui-control-item">
                                            <img src="../img/shimiao.png" />
                                            <p class="same color p_name">五爷庙</p>
                                            <p class="same color p_num">100本</p>
                                        </span>
                                        <span class="mui-control-item">
                                            <img src="../img/shimiao.png" />
                                            <p class="same color p_name">五爷庙</p>
                                            <p class="same color p_num">100本</p>
                                        </span>
                                        <span class="mui-control-item">
                                            <img src="../img/shimiao.png" />
                                            <p class="same color p_name">五爷庙</p>
                                            <p class="same color p_num">100本</p>
                                        </span>
                                        <span class="mui-control-item">
                                            <img src="../img/shimiao.png" />
                                            <p class="same color p_name">五爷庙</p>
                                            <p class="same color p_num">100本</p>
                                        </span>
                                        <span class="mui-control-item">
                                            <img src="../img/shimiao.png" />
                                            <p class="same color p_name">五爷庙</p>
                                            <p class="same color p_num">100本</p>
                                        </span> -->
                                    </div>
                                </div>
                            </div>


                            <!-- </div> -->
                        </div>
                    </div>
                </div>
                <!--
		            	滚动区域
		            -->
                <div id="scroll" style="height: 121px;">
                    <img class="tishi" src="../img/benxin/next.png">
                    <div style="height: 125px;" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                        <div id="sutra-list" class="mui-scroll" style="height: 125px;">

                        </div>
                    </div>
                </div>

                <!--
		            	三个图标
		            -->
                <ul class="btn">
                    <a href="./yinshua.html">
                        <li>
                            <img src="../img/benxin/wancheng.png">
                            <p>印刷</p>
                        </li>
                    </a>
                </ul>
            </div>
        </div>
    </div>




</body>
<script src="../bower_components/mui/dist/js/mui.js"></script>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../js/common.js"></script>
<script>
    function formatTime(timeStr) {
        if (!timeStr) {
            return "未";
        }

        var date = parseISODate(timeStr);
        return date.getFullYear() + "." + (date.getMonth() + 1) + "." + date.getDate()
    }

    function getBushiInfo(userTranscriptionID) {
        $.ajax({
            url: '/fe/print/user_transcription/' + userTranscriptionID + '/info',

            success: function (data) {
                console.log(data);
                var data = data.data;

                // 更新数字
                $('#printNum').text(data.print_num + "本");
                $('#donateNum').text(data.donate_num + "本");

                var vowTime = formatTime(data.vow_time) + "发愿";
                var finishTime = formatTime(data.finish_time) + "完成";

                // 更新时间
                $('#vowTime').text(vowTime);
                $('#finishTime').text(finishTime);

                // 更新名字
                $('#bushi_sutra').html(
                    '<p class="same color ">' + data.sutra_edition_name + '</p>')

                // 更新施愿列表
                var html = "";
                for (var i = 0; i < data.donate_detail.length; i++ ){
                    var donation = data.donate_detail[i];
                    html +=
                        '<span class="mui-control-item">' +
                            '<img class="img-circle" src="' + donation.img_url + '"/>' +
                            '<p class="same color p_name">' + donation.name + '</p>' +
                            '<p class="same color p_num">' + donation.num + '本</p>' +
                        '</span>';
                }
                $("#donate-list").html(html);


            }
        })
    }

    $(function () {

        // 清除localStorage中的下单存储
        localStorage.removeItem("selectedAddressList");

        // 拉取已抄完经书列表
        $.ajax({
            url: '/fe/transcript/sutra_editions',
            type: 'GET',
            data: {
                "type": 1,
                "offset": 0,
                "limit": 100,
            },
            success: function (data) {
                var sutras = data.data;

                // 将抄写列表追加到页面
                // for (var i = 0; i < sutras.length; i++) {
                for(var i=sutras.length-1;i>-1;i--) {
                    var sutra = sutras[i];
                    var _class = "sutra mui-control-item";
                    if (i == 0) {
                        _class += " mui-active";
                        localStorage.setItem("userTranscriptionID", sutra.user_transcription_id);
                        getBushiInfo(sutra.user_transcription_id);
                    }
                    var html = '<span class="' + _class + '"' +
                        ' data-user-transcription-id="' + sutra.user_transcription_id + '">' +
                        '<img src="' + sutra.cover_url + '">' +
                        '</span>';
                    $("#sutra-list").append(html);

                }

                $('.sutra').on('tap', function (e) {
                    var userTranscriptionID = e.currentTarget.dataset["userTranscriptionId"];
                    localStorage.setItem("userTranscriptionID", userTranscriptionID);
                    getBushiInfo(userTranscriptionID);
                });
            }
        });

        $('.tongxiu ul').width($(".tongxiu ul li").width() * $(".tongxiu ul li").length);
        $('.tongxiu ul').height($(".tongxiu ul li").height());
        $('.tongxiu').height($(".tongxiu ul li").height());


        $('.main .right').width($('.main').width() - $('.main .left').width());

        $(".sousuo").click(function () {

            location.href = './search.html'
        });
    })
</script>
<script>
    mui.init();
    mui('body').on('tap', 'a', function () {
        document.location.href = this.href;
    });
</script>

</html>